<template>
  <div class="login_container">
    <div class="login_box">
      <tab-menu :tabsMenuList="tabsMenu" mode="menu" v-on:tabsChange="tabsChange"></tab-menu>
      <component :is="currentComponent" ref="loginRef"></component>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TabMenu from '@/components/TabMenu/tabMenu.vue'
import LoginByPhone from '@/components/Login/loginByPhone.vue'
import LoginByQrCode from '@/components/Login/loginByQrCode.vue'
import LoginByVerificationCode from '@/components/Login/loginByVerificationCode.vue'
export default {
  data () {
    return {
      tabsMenu: [{ name: '手机' }, { name: '验证码' }, { name: '二维码' }],
      componentOptions: [LoginByPhone, LoginByVerificationCode, LoginByQrCode],
      index: 0 // 默认手机密码登录,用于控制<component>显示的组件,上面是个数组,所以直接用下标控制(计算属性)了
    }
  },
  components: {
    TabMenu,
    LoginByPhone,
    LoginByQrCode,
    LoginByVerificationCode
  },
  methods: {
    // 子组件触发父组件的方法,来改变index,以此来改变当前的组件
    tabsChange (index) {
      // tab菜单标签页切换触发
      // console.log(index)
      this.index = index
    }
  },
  computed: {
    // 控制动态组件
    currentComponent () {
      return this.componentOptions[this.index]
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  height: 100%;
  display: flex;
  align-items: center; // 垂直居中
  justify-content:flex-end; // 水平居中
  background: url('https://cdn.jsdelivr.net/gh/dingwanren/myImgCDN/people.png');
  background: url('https://cdn.jsdelivr.net/gh/dingwanren/myImgCDN/people.svg');
  background-size: 100% 100vh;
  background-position: -300px 0;
  background-attachment: fixed;

  .login_box {
    width: 400px;
    height: 400px;
    background-color: #fff;
    padding: 20px;
    margin-right: 50px;
    // box-shadow: 0 0 5px rgb(228, 225, 225);
    // border-radius: 10px;
  }
}

</style>
